<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>SoundBox</title>
  <meta name="description" content="Music, Musician, Bootstrap" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- for ios 7 style, multi-resolution icon of 152x152 -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-barstyle" content="black-translucent">
  <link rel="apple-touch-icon" href="images/logo.png">
  <meta name="apple-mobile-web-app-title" content="Flatkit">
  <!-- for Chrome on Android, multi-resolution icon of 196x196 -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="shortcut icon" sizes="196x196" href="images/logo.png">
  
  <!-- style -->
  <link rel="stylesheet" href="css/animate.css/animate.min.css" type="text/css" />
  <link rel="stylesheet" href="css/glyphicons/glyphicons.css" type="text/css" />
  <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="css/material-design-icons/material-design-icons.css" type="text/css" />
  <link rel="stylesheet" href="css/bootstrap/dist/css/bootstrap.min.css" type="text/css" />

  <!-- build:css css/styles/app.min.css -->
  <link rel="stylesheet" href="css/styles/app.css" type="text/css" />
  <link rel="stylesheet" href="css/styles/style.css" type="text/css" />
  <link rel="stylesheet" href="css/styles/font.css" type="text/css" />
  
  <link rel="stylesheet" href="libs/owl.carousel/dist/assets/owl.carousel.min.css" type="text/css" />
  <link rel="stylesheet" href="libs/owl.carousel/dist/assets/owl.theme.css" type="text/css" />
  <link rel="stylesheet" href="libs/mediaelement/build/mediaelementplayer.min.css" type="text/css" />
  <link rel="stylesheet" href="libs/mediaelement/build/mep.css" type="text/css" />

  <!-- endbuild -->
</head>
<body>
  <div class="app dk" id="app">
  
  <?php
	require "db.php";
	$user = 'root';
	$pass = '';
	$dbh = new PDO('mysql:host=localhost;dbname=sound', $user, $pass);
	
	$db_host = 'localhost';
    $db_user = 'root';
   	$db_pass = '';
  // Подключение к базе данных MySQL.
  @$on_link = mysqli_connect($db_host, $db_user, $db_pass);
  if (!$on_link) {
  echo "Ошибка соединения с сервером MySQL!";
  exit;
  }
// изменение набора символов на utf8
  mysqli_set_charset($on_link, "utf8");
// Выбираем БД для работы в MySQL.
	$db_base_ref = 'sound';
  @$db_select = mysqli_select_db ($on_link, $db_base_ref);
    if (!$db_select) {
    echo "Не удалось выбрать БД MySQL.";
    exit;
    }
	  
	  $polzovatel = $_SESSION['logged_user']->id;
	  $sql = "SELECT * FROM `users` WHERE id = $polzovatel";
	  $result_select = mysqli_query($on_link, $sql);
	  $obje = mysqli_fetch_object($result_select);
	  
	  $colob = $on_link->query("SELECT count(*) FROM tracks WHERE id_autor = $polzovatel");
	  $row = $colob->fetch_row();
	  $count = $row[0];
?>

<!-- ############ LAYOUT START-->

  <!-- aside -->
  <div id="aside" class="app-aside modal fade nav-dropdown">
    <!-- fluid app aside -->
    <div class="left navside grey dk" data-layout="column">
      <div class="navbar no-radius">
        <!-- brand -->
        <a href="player.php" class="navbar-brand md">
        	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="32" height="32">
        		<circle cx="24" cy="24" r="24" fill="rgba(255,255,255,0.2)"/>
        		<circle cx="24" cy="24" r="22" fill="#1c202b" class="brand-color"/>
        		<circle cx="24" cy="24" r="10" fill="#ffffff"/>
        		<circle cx="13" cy="13" r="2"  fill="#ffffff" class="brand-animate"/>
        		<path d="M 14 24 L 24 24 L 14 44 Z" fill="#FFFFFF" />
        		<circle cx="24" cy="24" r="3" fill="#000000"/>
        	</svg>
        
        	<img src="images/logo.png" alt="." class="hide">
        	<span class="hidden-folded inline">SoundBox</span>
        </a>
        <!-- / brand -->
      </div>
      <div data-flex class="hide-scroll">
          <nav class="scroll nav-stacked nav-active-primary">
            
            <ul class="nav" data-ui-nav>
              <li>
                <a href="player.php">
                  <span class="nav-icon">
                    <i class="material-icons">
                      play_circle_outline
                    </i>
                  </span>
                  <span class="nav-text">Главная</span>
                </a>
              </li>
              <li>
                <a href="browse.php">
                  <span class="nav-icon">
                    <i class="material-icons">
                      sort
                    </i>
                  </span>
                  <span class="nav-text">Подборки</span>
                </a>
              </li>
              <li>
                <a href="chart.php">
                  <span class="nav-icon">
                    <i class="material-icons">
                      trending_up
                    </i>
                  </span>
                  <span class="nav-text">Чарт</span>
                </a>
              </li>
              <li>
                <a href="artist.php">
                  <span class="nav-icon">
                    <i class="material-icons">
                      portrait
                    </i>
                  </span>
                  <span class="nav-text">Артисты</span>
                </a>
              </li>
              
            
              <li class="nav-header hidden-folded m-t">
                <span class="text-xs text-muted">Ваша коллекция</span>
              </li>
              <li>
                <a href="profile.php#tracks">
                  <span class="nav-label">
<?php
echo "<b class='label'>$count</b>";
?>
                  </span>
                  <span class="nav-icon">
                    <i class="material-icons">
                      list
                    </i>
                  </span>
                  <span class="nav-text">Треки</span>
                </a>
              </li>
              <li>
                <a href="profile.php#playlists">
                  <span class="nav-icon">
                    <i class="material-icons">
                      queue_music
                    </i>
                  </span>
                  <span class="nav-text">Плэйлисты</span>
                </a>
              </li>
              <li>
                <a href="profile.php#likes">
                  <span class="nav-icon">
                    <i class="material-icons">
                      favorite_border
                    </i>
                  </span>
                  <span class="nav-text">Избранное</span>
                </a>
              </li>
            </ul>
          </nav>
      </div>
      <div data-flex-no-shrink>
        <div class="nav-fold dropup">
          <a data-toggle="dropdown">
              <span class="pull-left">
<?php
echo "<img src='music/$obje->avatar_user' alt='...' class='w-32 img-circle'>";
?>
              </span>
              <span class="clear hidden-folded p-x p-y-xs">
                <span class="block _500 text-ellipsis"><?php echo $_SESSION['logged_user']->login; ?></span>
              </span>
          </a>
          <div class="dropdown-menu w dropdown-menu-scale ">
            <a class="dropdown-item" href="profile.php#profile">
              <span>Профиль</span>
            </a>
            <a class="dropdown-item" href="logout.html">Выйти</a>
          </div>
        </div>
        
      </div>
    </div>
  </div>
  <!-- / -->
  
  <!-- content -->
  <div id="content" class="app-content white bg box-shadow-z2" role="main">
    <div class="app-header hidden-lg-up white lt box-shadow-z1">
        <div class="navbar">
        <!-- brand -->
        <a href="player.php" class="navbar-brand md">
        	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="32" height="32">
        		<circle cx="24" cy="24" r="24" fill="rgba(255,255,255,0.2)"/>
        		<circle cx="24" cy="24" r="22" fill="#1c202b" class="brand-color"/>
        		<circle cx="24" cy="24" r="10" fill="#ffffff"/>
        		<circle cx="13" cy="13" r="2"  fill="#ffffff" class="brand-animate"/>
        		<path d="M 14 24 L 24 24 L 14 44 Z" fill="#FFFFFF" />
        		<circle cx="24" cy="24" r="3" fill="#000000"/>
        	</svg>
        
        	<img src="images/logo.png" alt="." class="hide">
        	<span class="hidden-folded inline">SoundBox</span>
        </a>
        <!-- / brand -->
        <!-- nabar right -->
        <ul class="nav navbar-nav pull-right">
          <li class="nav-item">
            <!-- Open side - Naviation on mobile -->
            <a data-toggle="modal" data-target="#aside" class="nav-link">
              <i class="material-icons">menu</i>
            </a>
            <!-- / -->
          </li>
        </ul>
        <!-- / navbar right -->
      </div>
    </div>
    <div class="app-footer app-player grey bg">
      <div class="playlist" style="width:100%"></div>
    </div>
    <div class="app-body" id="view">

<!-- ############ PAGE START-->

<div class="page-content">

	<div class="padding p-b-0">
		<div class="row row-sm item-masonry item-info-overlay">
			<div class="col-sm-6 text-white m-b-sm">
		        <div class="owl-carousel owl-theme owl-dots-sm owl-dots-bottom-left " data-ui-jp="owlCarousel" data-ui-options="{
		                     items: 1
		                    ,loop: true
		                    ,autoplay: true
		                    ,nav: true
		                    ,animateOut:&#x27;fadeOut&#x27;
		                  }">
						  
<?php
	  $sql5 = "SELECT * FROM `tracks` ORDER BY RAND() LIMIT 3";
	  $result_select5 = mysqli_query($on_link, $sql5);

while ($obj2 = mysqli_fetch_object($result_select5)){
echo "<div class='item r' data-id='$obj2->id_track' data-src='music/$obj2->hash_track'>";
echo "<div class='item-media primary'>";
echo "<a class='item-media-content' style='background-image: url(music/$obj2->oblojka_track);'></a>";
echo "<div class='item-overlay center'>";
echo "<button class='btn-playpause'>Play</button>";
echo "</div>";
echo "</div>";
echo "<div class='item-info'>";
echo "<div class='item-overlay bottom text-right'>";
echo "<a href='#' class='btn-favorite'><i class='fa fa-heart-o'></i></a>";
echo "<a href='#' class='btn-more' data-toggle='dropdown'><i class='fa fa-ellipsis-h'></i></a>";
echo "<div class='dropdown-menu pull-right black lt'></div>";
echo "</div>";
echo "<div class='item-title text-ellipsis'>";
echo "<a>$obj2->nazvanie_track</a>";
echo "</div>";
echo "<div class='item-author text-sm text-ellipsis'>";
echo "<a class='text-muted'>$obj2->autor_track</a>";
echo "</div>";
echo "</div>";
echo "</div>";
}
?>
		        </div>
		    </div>
			
			
<?php
	  $sql2 = "SELECT * FROM `tracks` ORDER BY RAND() LIMIT 4";
	  $result_select2 = mysqli_query($on_link, $sql2);

while ($obj3 = mysqli_fetch_object($result_select2)){
echo "<div class='col-sm-3 col-xs-6'>";
echo "<div class='item r' data-id='$obj3->id_track' data-src='music/$obj3->hash_track'>";
echo "<div class='item-media'>";
echo "<a class='item-media-content' style='background-image: url(music/$obj3->oblojka_track);'></a>";
echo "<div class='item-overlay center'>";
echo "<button class='btn-playpause'>Play</button>";
echo "</div>";
echo "</div>";
echo "<div class='item-info'>";
echo "<div class='item-overlay bottom text-right'>";
echo "<a href='#' class='btn-favorite'><i class='fa fa-heart-o'></i></a>";
echo "<a href='#' class='btn-more' data-toggle='dropdown'><i class='fa fa-ellipsis-h'></i></a>";
echo "<div class='dropdown-menu pull-right black lt'></div>";
echo "</div>";
echo "<div class='item-title text-ellipsis'>";
echo "<a>$obj3->nazvanie_track</a>";
echo "</div>";
echo "<div class='item-author text-sm text-ellipsis'>";
echo "<a class='text-muted'>$obj3->autor_track</a>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
}
?>
		</div>
	</div>
	
	<div class="row-col">
		<div class="col-lg-9 b-r no-border-md">
			<div class="padding">
				<h2 class="widget-title h4 m-b">В тренде</h2>
				<div class="owl-carousel owl-theme owl-dots-center" data-ui-jp="owlCarousel" data-ui-options="{
					margin: 20,
					responsiveClass:true,
				    responsive:{
				    	0:{
				    		items: 2
				    	},
				        543:{
				            items: 3
				        }
				    }
				}">
				
<?php
	  $sql22 = "SELECT * FROM `tracks` LIMIT 12";
	  $result_select22 = mysqli_query($on_link, $sql22);

while ($obj32 = mysqli_fetch_object($result_select22)){
echo "<div class=''>";
echo "<div class='item r' data-id='$obj32->id_track' data-src='music/$obj32->hash_track'>";
echo "<div class='item-media item-media-4by3'>";
echo "<a class='item-media-content' style='background-image: url(music/$obj32->oblojka_track);'></a>";
echo "<div class='item-overlay center'>";
echo "<button class='btn-playpause'>Play</button>";
echo "</div>";
echo "</div>";
echo "<div class='item-info'>";
echo "<div class='item-overlay bottom text-right'>";
echo "<a href='#' class='btn-favorite'><i class='fa fa-heart-o'></i></a>";
echo "<a href='#' class='btn-more' data-toggle='dropdown'><i class='fa fa-ellipsis-h'></i></a>";
echo "<div class='dropdown-menu pull-right black lt'></div>";
echo "</div>";
echo "<div class='item-title text-ellipsis'>";
echo "<a>$obj32->nazvanie_track</a>";
echo "</div>";
echo "<div class='item-author text-sm text-ellipsis'>";
echo "<a class='text-muted'>$obj32->autor_track</a>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
}
?>
				</div>
				<h2 class="widget-title h4 m-b">Новое</h2>
				<div class="row">
				
<?php
	  $sql222 = "SELECT * FROM `tracks`";
	  $result_select222 = mysqli_query($on_link, $sql222);

while ($obj322 = mysqli_fetch_object($result_select222)){
echo "<div class='col-xs-4 col-sm-4 col-md-3'>";
echo "<div class='item r' data-id='$obj322->id_track' data-src='music/$obj322->hash_track'>";
echo "<div class='item-media'>";
echo "<a class='item-media-content' style='background-image: url(music/$obj322->oblojka_track);'></a>";
echo "<div class='item-overlay center'>";
echo "<button class='btn-playpause'>Play</button>";
echo "</div>";
echo "</div>";
echo "<div class='item-info'>";
echo "<div class='item-overlay bottom text-right'>";
echo "<a href='#' class='btn-favorite'><i class='fa fa-heart-o'></i></a>";
echo "<a href='#' class='btn-more' data-toggle='dropdown'><i class='fa fa-ellipsis-h'></i></a>";
echo "<div class='dropdown-menu pull-right black lt'></div>";
echo "</div>";
echo "<div class='item-title text-ellipsis'>";
echo "<a>$obj322->nazvanie_track</a>";
echo "</div>";
echo "<div class='item-author text-sm text-ellipsis'>";
echo "<a class='text-muted'>$obj322->autor_track</a>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
}
?>
				</div>
			</div>
		</div>
		<div class="col-lg-3 w-xxl w-auto-md">
		  <div class="padding" style="bottom: 60px;" data-ui-jp="stick_in_parent">
		  	<h6 class="text text-muted">5 Лучших</h6>
		  	<div class="row item-list item-list-sm m-b">
			
<?php
	  $sql55 = "SELECT * FROM `tracks` LIMIT 5";
	  $result_select55 = mysqli_query($on_link, $sql55);

while ($obj25 = mysqli_fetch_object($result_select55)){
echo "<div class='col-xs-12'>";
echo "<div class='item r' data-id='$obj25->id_track' data-src='music/$obj25->hash_track'>";
echo "<div class='item-media'>";
echo "<a class='item-media-content' style='background-image: url(music/$obj25->oblojka_track);'></a>";
echo "</div>";
echo "<div class='item-info'>";
echo "<div class='item-title text-ellipsis'>";
echo "<a>$obj25->nazvanie_track</a>";
echo "</div>";
echo "<div class='item-author text-sm text-ellipsis'>";
echo "<a class='text-muted'>$obj25->autor_track</a>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
}
?>			
		  	</div>
		  	<h6 class="text text-muted">Go mobile</h6>
		  	<div class="btn-groups">
		          <a href="" class="btn btn-sm dark lt m-r-xs" style="width: 135px">
		            <span class="pull-left m-r-sm">
		              <i class="fa fa-apple fa-2x"></i>
		            </span>
		            <span class="clear text-left l-h-1x">
		              <span class="text-muted text-xxs">Download on the</span>
		              <b class="block m-b-xs">App Store</b>
		            </span>
		          </a>
		          <a href="" class="btn btn-sm dark lt" style="width: 133px">
		            <span class="pull-left m-r-sm">
		              <i class="fa fa-play fa-2x"></i>
		            </span>
		            <span class="clear text-left l-h-1x">
		              <span class="text-muted text-xxs">Get it on</span>
		              <b class="block m-b-xs m-r-xs">Google Play</b>
		            </span>
		          </a>
		      </div>
		      <div class="b-b m-y"></div>
		      <div class="nav text-sm _600">
		      	<a href="#" class="nav-link text-muted m-r-xs">About</a>
		      	<a href="#" class="nav-link text-muted m-r-xs">Contact</a>
		      	<a href="#" class="nav-link text-muted m-r-xs">Legal</a>
		      	<a href="#" class="nav-link text-muted m-r-xs">Policy</a>
		      </div>
		      <p class="text-muted text-xs p-b-lg">&copy; Copyright 2021 Блохин Роман</p>
		  </div>
		</div>
	</div>
</div>

<!-- ############ PAGE END-->

    </div>
  </div>
  <!-- / -->

  
  <!-- ############ SWITHCHER START-->
    <div id="switcher">
      <div class="switcher white" id="sw-theme">
        <a href="#" data-ui-toggle-class="active" data-ui-target="#sw-theme" class="white sw-btn">
          <i class="fa fa-gear text-muted"></i>
        </a>
        <div class="box-header">
          <strong>Изменить тему</strong>
        </div>
        <div class="box-divider"></div>
        <div class="box-body">
          <p id="settingLayout" class="hidden-md-down">
            <label class="md-check m-y-xs" data-target="folded">
              <input type="checkbox">
              <i class="green"></i>
              <span>Скрыть боковую панель</span>
            </label>
          </p>
          <p>Цвета:</p>
          <p data-target="color">
            <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
              <input type="radio" name="color" value="primary">
              <i class="primary"></i>
            </label>
            <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
              <input type="radio" name="color" value="accent">
              <i class="accent"></i>
            </label>
            <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
              <input type="radio" name="color" value="warn">
              <i class="warn"></i>
            </label>
            <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
              <input type="radio" name="color" value="success">
              <i class="success"></i>
            </label>
            <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
              <input type="radio" name="color" value="info">
              <i class="info"></i>
            </label>
            <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
              <input type="radio" name="color" value="blue">
              <i class="blue"></i>
            </label>
            <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
              <input type="radio" name="color" value="warning">
              <i class="warning"></i>
            </label>
            <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
              <input type="radio" name="color" value="danger">
              <i class="danger"></i>
            </label>
          </p>
          <p>Темы:</p>
          <div data-target="bg" class="text-u-c text-center _600 clearfix">
            <label class="p-a col-xs-3 light pointer m-a-0">
              <input type="radio" name="theme" value="" hidden>
              <i class="active-checked fa fa-check"></i>
            </label>
            <label class="p-a col-xs-3 grey pointer m-a-0">
              <input type="radio" name="theme" value="grey" hidden>
              <i class="active-checked fa fa-check"></i>
            </label>
            <label class="p-a col-xs-3 dark pointer m-a-0">
              <input type="radio" name="theme" value="dark" hidden>
              <i class="active-checked fa fa-check"></i>
            </label>
            <label class="p-a col-xs-3 black pointer m-a-0">
              <input type="radio" name="theme" value="black" hidden>
              <i class="active-checked fa fa-check"></i>
            </label>
          </div>
        </div>
      </div>
    </div>
  <!-- ############ SWITHCHER END-->
  <!-- ############ SEARCH START -->
    <div class="modal white lt fade" id="search-modal" data-backdrop="false">
      <a data-dismiss="modal" class="text-muted text-lg p-x modal-close-btn">&times;</a>
      <div class="row-col">
        <div class="p-a-lg h-v row-cell v-m">
          <div class="row">
            <div class="col-md-8 offset-md-2">
              <form action="search.html" class="m-b-md">
                <div class="input-group input-group-lg">
                  <input type="text" class="form-control" placeholder="Type keyword" data-ui-toggle-class="hide" data-ui-target="#search-result">
                  <span class="input-group-btn">
                    <button class="btn b-a no-shadow white" type="submit">Search</button>
                  </span>
                </div>
              </form>
              <div id="search-result" class="animated fadeIn">
                <p class="m-b-md"><strong>23</strong> <span class="text-muted">Results found for: </span><strong>Keyword</strong></p>
                <div class="row">
                  <div class="col-sm-6">
                    <div class="row item-list item-list-sm item-list-by m-b">
                          <div class="col-xs-12">
                          	<div class="item r" data-id="item-3" data-src="http://api.soundcloud.com/tracks/79031167/stream?client_id=a10d44d431ad52868f1bce6d36f5234c">
                      			<div class="item-media ">
                      				<a href="track.detail.html" class="item-media-content" style="background-image: url('images/b2.jpg');"></a>
                      			</div>
                      			<div class="item-info">
                      				<div class="item-title text-ellipsis">
                      					<a href="track.detail.html">I Wanna Be In the Cavalry</a>
                      				</div>
                      				<div class="item-author text-sm text-ellipsis ">
                      					<a href="artist.detail.html" class="text-muted">Jeremy Scott</a>
                      				</div>
                      				<div class="item-meta text-sm text-muted">
                      		        </div>
                      
                      
                      			</div>
                      		</div>
                      	</div>
                          <div class="col-xs-12">
                          	<div class="item r" data-id="item-6" data-src="http://api.soundcloud.com/tracks/236107824/stream?client_id=a10d44d431ad52868f1bce6d36f5234c">
                      			<div class="item-media ">
                      				<a href="track.detail.html" class="item-media-content" style="background-image: url('images/b5.jpg');"></a>
                      			</div>
                      			<div class="item-info">
                      				<div class="item-title text-ellipsis">
                      					<a href="track.detail.html">Body on me</a>
                      				</div>
                      				<div class="item-author text-sm text-ellipsis ">
                      					<a href="artist.detail.html" class="text-muted">Rita Ora</a>
                      				</div>
                      				<div class="item-meta text-sm text-muted">
                      		        </div>
                      
                      
                      			</div>
                      		</div>
                      	</div>
                          <div class="col-xs-12">
                          	<div class="item r" data-id="item-2" data-src="http://api.soundcloud.com/tracks/259445397/stream?client_id=a10d44d431ad52868f1bce6d36f5234c">
                      			<div class="item-media ">
                      				<a href="track.detail.html" class="item-media-content" style="background-image: url('images/b1.jpg');"></a>
                      			</div>
                      			<div class="item-info">
                      				<div class="item-title text-ellipsis">
                      					<a href="track.detail.html">Fireworks</a>
                      				</div>
                      				<div class="item-author text-sm text-ellipsis ">
                      					<a href="artist.detail.html" class="text-muted">Kygo</a>
                      				</div>
                      				<div class="item-meta text-sm text-muted">
                      		        </div>
                      
                      
                      			</div>
                      		</div>
                      	</div>
                          <div class="col-xs-12">
                          	<div class="item r" data-id="item-7" data-src="http://api.soundcloud.com/tracks/245566366/stream?client_id=a10d44d431ad52868f1bce6d36f5234c">
                      			<div class="item-media ">
                      				<a href="track.detail.html" class="item-media-content" style="background-image: url('images/b6.jpg');"></a>
                      			</div>
                      			<div class="item-info">
                      				<div class="item-title text-ellipsis">
                      					<a href="track.detail.html">Reflection (Deluxe)</a>
                      				</div>
                      				<div class="item-author text-sm text-ellipsis ">
                      					<a href="artist.detail.html" class="text-muted">Fifth Harmony</a>
                      				</div>
                      				<div class="item-meta text-sm text-muted">
                      		        </div>
                      
                      
                      			</div>
                      		</div>
                      	</div>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="row item-list item-list-sm item-list-by m-b">
                          <div class="col-xs-12">
                          	<div class="item">
                      			<div class="item-media rounded ">
                      				<a href="artist.detail.html" class="item-media-content" style="background-image: url('images/a7.jpg');"></a>
                      			</div>
                      			<div class="item-info ">
                      				<div class="item-title text-ellipsis">
                      					<a href="artist.detail.html">Richard Carr</a>
                      					<div class="text-sm text-muted">6 songs</div>
                      				</div>
                      			</div>
                      		</div>
                      	</div>
                          <div class="col-xs-12">
                          	<div class="item">
                      			<div class="item-media rounded ">
                      				<a href="artist.detail.html" class="item-media-content" style="background-image: url('images/a3.jpg');"></a>
                      			</div>
                      			<div class="item-info ">
                      				<div class="item-title text-ellipsis">
                      					<a href="artist.detail.html">Joe Holmes</a>
                      					<div class="text-sm text-muted">24 songs</div>
                      				</div>
                      			</div>
                      		</div>
                      	</div>
                          <div class="col-xs-12">
                          	<div class="item">
                      			<div class="item-media rounded ">
                      				<a href="artist.detail.html" class="item-media-content" style="background-image: url('images/a5.jpg');"></a>
                      			</div>
                      			<div class="item-info ">
                      				<div class="item-title text-ellipsis">
                      					<a href="artist.detail.html">Judy Woods</a>
                      					<div class="text-sm text-muted">23 songs</div>
                      				</div>
                      			</div>
                      		</div>
                      	</div>
                          <div class="col-xs-12">
                          	<div class="item">
                      			<div class="item-media rounded ">
                      				<a href="artist.detail.html" class="item-media-content" style="background-image: url('images/a4.jpg');"></a>
                      			</div>
                      			<div class="item-info ">
                      				<div class="item-title text-ellipsis">
                      					<a href="artist.detail.html">Judith Garcia</a>
                      					<div class="text-sm text-muted">13 songs</div>
                      				</div>
                      			</div>
                      		</div>
                      	</div>
                    </div>
                  </div>
                </div>
              </div>
              <div id="top-search" class="btn-groups">
                <strong class="text-muted">Top searches: </strong>
                <a href="#" class="btn btn-xs white">Happy</a> 
                <a href="#" class="btn btn-xs white">Music</a> 
                <a href="#" class="btn btn-xs white">Weekend</a> 
                <a href="#" class="btn btn-xs white">Summer</a> 
                <a href="#" class="btn btn-xs white">Holiday</a> 
                <a href="#" class="btn btn-xs white">Blue</a> 
                <a href="#" class="btn btn-xs white">Soul</a> 
                <a href="#" class="btn btn-xs white">Calm</a> 
                <a href="#" class="btn btn-xs white">Nice</a> 
                <a href="#" class="btn btn-xs white">Home</a> 
                <a href="#" class="btn btn-xs white">SLeep</a> 
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ############ SEARCH END -->
  <!-- ############ SHARE START -->
  <div id="share-modal" class="modal fade animate">
    <div class="modal-dialog">
      <div class="modal-content fade-down">
        <div class="modal-header">
  
          <h5 class="modal-title">Share</h5>
        </div>
        <div class="modal-body p-lg">
          <div id="share-list" class="m-b">
            <a href="" class="btn btn-icon btn-social rounded btn-social-colored indigo" title="Facebook">
                <i class="fa fa-facebook"></i>
                <i class="fa fa-facebook"></i>
            </a>
  
            <a href="" class="btn btn-icon btn-social rounded btn-social-colored light-blue" title="Twitter">
                <i class="fa fa-twitter"></i>
                <i class="fa fa-twitter"></i>
            </a>
  
            <a href="" class="btn btn-icon btn-social rounded btn-social-colored red-600" title="Google+">
                <i class="fa fa-google-plus"></i>
                <i class="fa fa-google-plus"></i>
            </a>
  
            <a href="" class="btn btn-icon btn-social rounded btn-social-colored blue-grey-600" title="Trumblr">
                <i class="fa fa-tumblr"></i>
                <i class="fa fa-tumblr"></i>
            </a>
  
            <a href="" class="btn btn-icon btn-social rounded btn-social-colored red-700" title="Pinterst">
                <i class="fa fa-pinterest"></i>
                <i class="fa fa-pinterest"></i>
            </a>
          </div>
          <div>
            <input class="form-control" value="http://plamusic.com/slug"/>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ############ SHARE END -->

<!-- ############ LAYOUT END-->
  </div>

<!-- build:js scripts/app.min.js -->
<!-- jQuery -->
  <script src="libs/jquery/dist/jquery.js"></script>
<!-- Bootstrap -->
  <script src="libs/tether/dist/js/tether.min.js"></script>
  <script src="libs/bootstrap/dist/js/bootstrap.js"></script>
<!-- core -->
  <script src="libs/jQuery-Storage-API/jquery.storageapi.min.js"></script>
  <script src="libs/jquery.stellar/jquery.stellar.min.js"></script>
  <script src="libs/owl.carousel/dist/owl.carousel.min.js"></script>
  <script src="libs/jscroll/jquery.jscroll.min.js"></script>
  <script src="libs/PACE/pace.min.js"></script>
  <script src="libs/jquery-pjax/jquery.pjax.js"></script>

  <script src="libs/mediaelement/build/mediaelement-and-player.min.js"></script>
  <script src="libs/mediaelement/build/mep.js"></script>
  <script src="scripts/player.js"></script>

  <script src="scripts/config.lazyload.js"></script>
  <script src="scripts/ui-load.js"></script>
  <script src="scripts/ui-jp.js"></script>
  <script src="scripts/ui-include.js"></script>
  <script src="scripts/ui-device.js"></script>
  <script src="scripts/ui-form.js"></script>
  <script src="scripts/ui-nav.js"></script>
  <script src="scripts/ui-screenfull.js"></script>
  <script src="scripts/ui-scroll-to.js"></script>
  <script src="scripts/ui-toggle-class.js"></script>
  <script src="scripts/ui-taburl.js"></script>
  <script src="scripts/app.js"></script>
  <script src="scripts/site.js"></script>
  <script src="scripts/ajax.js"></script>
<!-- endbuild -->
</body>
</html>
